import {
  Button,
  Divider,





  Form, Input,
  message,
  Modal,
  Popconfirm,
  Table
} from "antd";
import { connect } from "dva";
import React from "react";
import styles from "./styles.less";
function mapStateToProps({ baseModel, houseModel }) {
  return {
    baseModel: baseModel,
    houseModel: houseModel,
  };
}
@connect(mapStateToProps)
class MaterialHouse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        {
          title: "物资库名称",
          dataIndex: "materialLibraryName",
          key: "materialLibraryName",
          ellipsis: true,
        },
        {
          title: "经度",
          dataIndex: "lng",
          key: "lng",
          ellipsis: true,
        },
        {
          title: "纬度",
          dataIndex: "lat",
          key: "lat",
          ellipsis: true,
        },
        {
          title: "负责人",
          dataIndex: "principalName",
          key: "principalName",
          ellipsis: true,
        },
        {
          title: "联系电话",
          dataIndex: "principalPhone",
          key: "principalPhone",
          ellipsis: true,
        },
        {
          title: "物资库等级",
          dataIndex: "rank",
          key: "rank",
          ellipsis: true,
        },
        {
          title: "物资库面积",
          dataIndex: "area",
          key: "area",
          ellipsis: true,
        },
        {
          title: "操作",
          width: "150px",
          key: "action",
          render: (text, record) => (
            <div>
              <a
                onClick={this.changeHouse.bind(this, record.materialLibraryId)}
              >
                修改
              </a>
              <Divider type="vertical" />
              <Popconfirm
                title="你确定要删除此物资仓库吗?"
                onConfirm={this.deleteHouse.bind(
                  this,
                  record.materialLibraryId
                )}
                okText="确定"
                cancelText="取消"
              >
                <a>删除</a>
              </Popconfirm>
            </div>
          ),
        },
      ],
      data: [],
      isModalVisible: false,
      title:"",
      name:'',
      lng:'',
      lat:'',
      principalName:'',
      principalPhone:'',
      rank:'',
      area:'',
    };
  }
  //渲染前调用
  componentWillMount() {}
  //渲染后调用
  componentDidMount() {
    this.getListDatas();
  }

  changeHouse(e) {
    this.setState({
      isModalVisible: true,
      title:'修改物资库'
    });
  }

  //获取物资库列表
  getListDatas = () => {
    let { dispatch } = this.props;
    let params = {
      materialLibraryName: "",
      pageNum: 0,
      pageSize: 0,
    };
    dispatch({
      type: "houseModel/getlistData",
      payload: { params: params, callback: this.listCallbacks.bind(this) },
    });
  };
  //获取物资库列表的回调函数
  listCallbacks(e) {
    this.setState({
      data: e,
    });
  }

  //删除物资库方法
  deleteHouse(e) {
    let { dispatch } = this.props;
    let params = {
      id: e,
    };
    dispatch({
      type: "houseModel/getdelData",
      payload: { params: params, callback: this.delCallback.bind(this) },
    });
  }
  delCallback(e) {
    message.success(e);
    this.getListDatas();
  }
  handleOk() {
    this.setState({
      isModalVisible: false,
    });
  }
  handleCancel() {
    this.setState({
      isModalVisible: false,
    });
  }
  render() {
    let { menuName } = this.props.baseModel;
    let { columns, data, isModalVisible,title ,name,lng,lat,principalName,principalPhone,rank,area} = this.state;
    let layout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    let tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    };
    return (
      <React.Fragment>
        <div className={styles.mateial}>
          <div className={styles.searchBox}>
            物资库名称：
            <Input style={{ width: 200, marginRight: 10 }} />
            <Button type="primary">搜索</Button>
          </div>
          <Button style={{ margin: "20px 0" }} type="primary">
            新增
          </Button>
          <div className={styles.tableBox}>
            <Table columns={columns} dataSource={data} />
          </div>
          <Modal
            title={title}
            visible={isModalVisible}
            onOk={this.handleOk.bind(this)}
            onCancel={this.handleCancel.bind(this)}
          >
            <Form
              {...layout}
              name="basic"
              initialValues={{ remember: true }}
            >
              <Form.Item
                label="名称"
                rules={[
                  { required: true, message: "Please input your username!" },
                ]}
              >
                <Input value={name} />
              </Form.Item>

              <Form.Item
                label="经度"
                rules={[
                  { required: true, message: "Please input your password!" },
                ]}
              >
                <Input value={lng} />
              </Form.Item>
              <Form.Item
                label="纬度"
                rules={[
                  { required: true, message: "Please input your password!" },
                ]}
              >
                <Input value={lat} />
              </Form.Item>
              <Form.Item
                label="负责人"
                rules={[
                  { required: true, message: "Please input your password!" },
                ]}
              >
                <Input value={principalName} />
              </Form.Item>
              <Form.Item
                label="联系电话"
                rules={[
                  { required: true, message: "Please input your password!" },
                ]}
              >
                <Input value={principalPhone} />
              </Form.Item>

              <Form.Item
                label="物资库等级"
                rules={[
                  { required: true, message: "Please input your password!" },
                ]}
              >
                <Input value={rank} />
              </Form.Item>

              <Form.Item
                label="物资库面积"
                rules={[
                  { required: true, message: "Please input your password!" },
                ]}
              >
                <Input value={area} />
              </Form.Item>

            </Form>
          </Modal>
        </div>
      </React.Fragment>
    );
  }
}
export default MaterialHouse;
